<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view class="c-box">
			<view v-for="(item,index) in itemList" :key="index">
				<u-card :title="item.title" :head-border-bottom="false" :foot-border-top="false" :border="false"
					@click="choose(item,index)">
					<view slot="body">
						<view class="c-content">
							<view>{{item.content}}</view>
							<view class="c-a">{{item.amount}}元</view>
						</view>
						<view class="c-gou" v-if="index == hoverIndex">
							<image style="height:30px; width: 30px;" src="/static/imgs/gou2.png"></image>
						</view>
					</view>
				</u-card>
			</view>
		</view>
		<!-- 分享加次数 -->
		<view class="c-share" v-if="type == 1">
			<view>
				<view class="c-share-title">免费获取发布条数</view>
				<view class="c-share-content">*每邀请1人 新增1条发布数</view>
				<view class="c-share-content">*被邀请人须首次进群，方为有效邀请</view>
			</view>
			<view class="c-share-button">
				<button open-type="share" class="btn"></button>
				去分享
			</view>
		</view>
		<!-- 分享加30天查看时间 -->
		<view class="c-share" v-if="type == 2">
			<view>
				<view class="c-share-title">免费获取月卡</view>
				<view class="c-share-content">*每邀请1人 获取1张月卡（不封顶）</view>
				<view class="c-share-content">*被邀请人须首次进群，方为有效邀请</view>
			</view>
			<view class="c-share-button">
				<button open-type="share" class="btn"></button>
				去分享
			</view>
		</view>
		<view class="c-count">
			<view>
				小计
			</view>
			<view style="font-weight: bold;">
				￥ {{submitInfo.amount}}
			</view>
		</view>
		<view class="c-foot">
			<view style="font-weight: bold">
				支付方式
			</view>
			<view class="f-pay" @click="choosePayf">
				<view style="display: flex;line-height: 30px;">
					<view>
						<image v-if="choosePay" style="height:30px; width: 30px;" src="/static/imgs/pay.png"></image>
						<image v-if="!choosePay" style="height:30px; width: 30px;" src="/static/imgs/pay_hui.png">
						</image>
					</view>
					<view style="margin-left: 5px;">
						微信支付
					</view>
				</view>
				<view>
					<image v-if="choosePay" style="height:20px; width: 20px;margin-top: 3px;"
						src="/static/imgs/gou.png"></image>
					<image v-if="!choosePay" style="height:20px; width: 20px;margin-top: 3px;"
						src="/static/imgs/gou_hui.png"></image>
				</view>
			</view>
		</view>
		<view style="margin-top: 10px;width: 90%;margin-left: 5%;">
			<u-button @click="submit" :custom-style="customStyle" shape="circle" type="success">立即支付</u-button>
			<view @click="toRecord" style="margin-top: 12px;color: #aaa;text-align: center;font-size: 14px;">我的购买记录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		payApis,
	} from '@/apis/index'
	export default {
		onLoad(obj) {
			this.type = obj.type;
			this.getList(obj.type)
		},
		data() {
			return {
				type: 0,
				userInfo: {},
				customStyle: {
					backgroundColor: '#009688'
				},
				choosePay: true,
				hoverIndex: -1,
				count: 0,
				showChoose: false,
				itemList: [],
				submitInfo: {
					id: 0,
					amount: 0,
					number: 0
				},
				itemAlert: {
					type: 'warning',
					title: "请选择一个套餐!",
					duration: 2000,
				},
				payAlert: {
					type: 'warning',
					title: "请选择支付方式!",
					duration: 2000,
				},
			}
		},
		methods: {
			getList(type) {
				var _this = this
				this.userInfo = _this.$store.state.wxUser;

				let para = {
					type: type
				}
				payApis.getList(para).then((res) => {
					_this.itemList = res.data.data
				})


			},
			choose(item, index) {
				var _this = this
				_this.hoverIndex = index
				for (var i = 0; i < _this.itemList.length; i++) {
					if (index == i) {
						_this.submitInfo = _this.itemList[index]
						break
					}
				}
			},
			choosePayf() {
				if (this.choosePay) {
					this.choosePay = false
				} else {
					this.choosePay = true
				}
			},
			showToast(params) {
				this.$refs.uToast.show(params)
			},
			submit() {
				var _this = this
				if (_this.submitInfo.id == 0) {
					_this.showToast(_this.itemAlert)
					return
				}

				if (!_this.choosePay) {
					_this.showToast(_this.payAlert)
					return
				}

				let para = {
					title: _this.submitInfo.title,
					amount: _this.submitInfo.amount,
					tPayModel: _this.submitInfo
				}

				let jsonData = {
					jsonStr: JSON.stringify(para)
				}

				console.log("jsonData:", jsonData)
				payApis.getOrder(jsonData).then((res) => {
					let data = res.data;
					if (data.code == 0) {
						wx.requestPayment({
							timeStamp: data.data.timeStamp,
							nonceStr: data.data.nonceStr,
							package: data.data.packageValue,
							signType: data.data.signType,
							paySign: data.data.paySign,
							success(res) {
								wx.showToast({
									title: '支付成功',
									icon: 'success'
								});

								if (_this.submitInfo.type == 1) {
									//发送条数 
									var userUseNumber = parseInt(_this.userInfo.userUseNumber) + parseInt(
										_this.submitInfo.value)

									_this.$store.dispatch('setUserUseNumber', userUseNumber);
								} else {
									//过期时间
									var userExpireDateNumber = parseInt(_this.userInfo
										.userExpireDateNumber) + parseInt(_this.submitInfo.value)

									_this.$store.dispatch('setUserExpireDateNumber', userExpireDateNumber);
								}

								//重新加载用户信息
								uni.$emit('userInfoUpdated', true);

								//跳转到index
								uni.navigateBack()

								// payApis.submit(_this.submitInfo).then((res) => {
								// 	console.log(res)

								// 	let userExpireDateNumber = res.data.data.userExpireDateNumber
								// 	let userUseNumber = res.data.data.userUseNumber

								// 	if (userExpireDateNumber != '') {
								// 		_this.$store.dispatch('setUserExpireDateNumber',
								// 			userExpireDateNumber);
								// 	}

								// 	if (userUseNumber != '') {
								// 		_this.$store.dispatch('setUserUseNumber', userUseNumber);
								// 	}

								// 	//重新加载用户信息
								// 	uni.$emit('userInfoUpdated', true);

								// 	//跳转到index
								// 	uni.navigateBack()
								// })

							},
							fail(res) {
								console.error('支付失败', res);
								wx.showModal({
									title: '支付失败',
									content: '支付过程中出现问题',
									showCancel: false
								});
							}
						})
					}
				})

			},
			toRecord() {
				uni.navigateTo({
					url: '../payRecord/payRecord'
				});
			},
			onShareAppMessage(res) {
				return {
					title: '企极立财税甩单圈,快来试试吧',
					// imageUrl: '../../static/imgs/pdf_zh.jpg',
					path: '/pages/index/index?userId=' + this.userInfo.userId + '&type=' + this.type
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-box {
		height: 49vh;
		overflow-y: scroll;
	}

	.c-content {
		color: #ababab;
		display: flex;
		justify-content: space-between;
	}

	.c-gou {
		position: absolute;
		right: 3px;
		bottom: 0;
		visibility: visible;
	}

	.c-a {
		color: red;
		font-size: 18px;
		font-weight: bold;
		position: relative;
		top: -20px;
	}

	.c-share {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		border-radius: 9px;
		margin: 17px 17px 0 17px;
		box-shadow: none;
		padding: 17px;
	}

	.c-share-title {
		font-weight: bold;
	}

	.c-share-content {
		margin-top: 6px;
		font-size: 14px;
		color: #ababab;
	}

	.c-share-button {
		position: relative;
		width: 70px;
		font-size: 14px;
		padding: 8px;
		border-radius: 20px;
		text-align: center;
		background-color: #009688;
		color: #ffffff;
	}

	.btn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		background-color: transparent;
		border: none;
	}

	.c-count {
		padding: 20px;
		display: flex;
		font-size: 14px;
		justify-content: space-between;
		border-bottom: #cccccc solid 1px;
	}

	.c-foot {
		padding: 20px 20px 10px 20px;
		font-size: 15px;
	}

	.f-pay {
		margin-top: 28px;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
	}
</style>